<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="80%"
      append-to-body
      custom-class="import-dialog"
    >
      <div class="header">
        <div class="title">房间：{{ generateHouseName(houseData) }}</div>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="info borderRight">
              <div class="item">
                <i class="logo el-icon-s-home"></i>
                <div class="content-box">
                  <div class="label">当前状态</div>
                  <div class="desc">
                    已入住 <i class="icon el-icon-edit"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info borderRight">
              <div class="item">
                <i class="logo el-icon-s-data"></i>
                <div class="content-box">
                  <div class="label">房屋类型</div>
                  <div class="desc">
                    <dict-tag
                      :options="dict.type.dict_house_nature"
                      :value="houseData.houseNature"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info borderRight">
              <div class="item">
                <i class="logo el-icon-s-finance"></i>
                <div class="content-box">
                  <div class="label">出租价格</div>
                  <div class="desc">1234元/月</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="info">
              <div class="item">
                <i class="logo el-icon-user-solid"></i>
                <div class="content-box">
                  <div class="label">房屋管理员</div>
                  <div class="desc">
                    {{ houseData.houseManagerName }}
                    {{ houseData.houseManagerName }}
                    <i class="icon el-icon-edit"></i>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="h-buttom">已入住123天</div>
      </div>
      <div class="main">
        <div class="tabs-box">
          <div class="tabs-header flex align-center justify-between">
            <div class="tabs-list">
              <div
                class="label"
                :class="{ active: index == current }"
                v-for="(item, index) in tabsList"
                :key="index"
                @click="current = index"
              >
                {{ item.label }}
              </div>
            </div>
            <div class="handle-box">
              <div class="item">
                <i class="el-icon-document"></i>
                预约
              </div>
              <div class="item">
                <i class="el-icon-document"></i>
                签约
              </div>
              <div class="item">
                <i class="el-icon-document"></i>
                添加账单
              </div>
            </div>
          </div>
          <div class="tabs-body">
            <div class="info-box">
              <div class="info-title">
                <label>房间信息</label>
              </div>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房间号</div>
                    <div class="value">{{ houseData.roomNumber }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">所属楼盘</div>
                    <div class="value">{{ houseData.estateName }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">地址</div>
                    <div class="value">{{ generateAddress(houseData) }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房屋类型</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_house_nature"
                        :value="houseData.houseNature"
                      />
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">状态</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_house_state"
                        :value="houseData.houseState"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房屋面积</div>
                    <div class="value">
                      {{ houseData.houseArea }} m<sup>2</sup>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房型类型</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_house_type"
                        :value="houseData.houseType"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">户型</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_room_type"
                        :value="houseData.roomType"
                      />
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">是否线上出租</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_online_rental_type"
                        :value="houseData.onlineRentalType"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">产权类型</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_tenant_type"
                        :value="houseData.housePropertyType"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">产权所有人</div>
                    <div class="value">{{ houseData.housePropertyOwner }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">关联物业</div>
                    <div class="value">{{ houseData.propertyName }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">是否有水电燃气表</div>
                    <div class="value">是</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">是否为智能设备</div>
                    <div class="value">
                      {{
                        houseData.smartFurnitureType == 1
                          ? "是"
                          : houseData.smartFurnitureType == 0
                          ? "否"
                          : ""
                      }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">水表号</div>
                    <div class="value">{{ houseData.waterMeterNumber }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">电表号</div>
                    <div class="value">{{ houseData.electricMeterNumber }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">燃气号</div>
                    <div class="value">{{ houseData.gasMeterNumber }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房屋管理员</div>
                    <div class="value">{{ houseData.houseManagerName }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="info-box">
              <div class="info-title">
                <label>预约信息</label>
              </div>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房间图片</div>
                    <div class="value">共六张</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">周期类型</div>
                    <div class="value">
                      <dict-tag
                        :options="dict.type.dict_unsubscribe_rule_type"
                        :value="housingAllocation.apartmentType"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">起租时长</div>
                    <div class="value">
                      {{ housingAllocation.rentStartingTime }}天
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">可租时间</div>
                    <div class="value">
                      {{ housingAllocation.rentableStartTime }}~{{
                        housingAllocation.rentableEndTime
                      }}
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">可入住时间</div>
                    <div class="value">
                      {{ housingAllocation.checkoutTime }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">退租截止时间</div>
                    <div class="value">
                      {{ housingAllocation.leaseEndTime }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">收费类型</div>
                    <div class="value">{{ housingAllocation.chargeType==0?'固定收费':housingAllocation.chargeType==1?'时效收费':'' }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">收费标准</div>
                    <div class="value">
                      <el-button type="text">查看</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">押金</div>
                    <div class="value">
                      {{ housingAllocation.cashPledge }}元
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">保洁费</div>
                    <div class="value">
                      {{ housingAllocation.cleaningPrice }}元/次
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">房管家</div>
                    <div class="value">
                      <p>
                        {{ housingAllocation.stationNames }}-{{
                          housingAllocation.stewardPhone
                        }}
                      </p>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">关联合同</div>
                    <div class="value">{{ contractTemplateData.templateName }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">退订规则</div>
                    <div class="value">
                      <!-- {{ housingAllocation.unsubscribeRuleId }} -->
                      {{ unsubscribeRuleData.unsubscribeRuleName }}
                      <el-button type="text" @click="dialogRuleDetailVisible = true">查看</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="info-box">
              <div class="info-title">
                <label>房间配置</label>
              </div>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">装修信息</div>
                    <div class="value">
                      {{ housingAllocation.decorationName }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">配置</div>
                    <div class="value">
                      <el-tag
                        effect="plain"
                        style="margin-right: 10px"
                        v-for="(
                          item, index
                        ) in housingAllocation.facilitiesItems"
                        :key="index"
                      >
                        {{ item.facilitiesName }}x1 ￥{{ item.facilitiesPrice }}
                      </el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">描述信息</div>
                    <div class="value">
                      {{ housingAllocation.apartmentDescription }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">标签</div>
                    <div class="value">
                      <el-tag
                        effect="plain"
                        style="margin-right: 10px"
                        v-for="(item, index) in strToArr(
                          housingAllocation.labelNames
                        )"
                        :key="index"
                      >
                        {{ item }}
                      </el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="info-box">
              <div class="info-title">
                <label>周边配置</label>
              </div>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">景区</div>
                    <div class="value">
                      <el-tag
                        effect="plain"
                        style="margin-right: 10px"
                        v-for="(item, index) in strToArr(
                          housingAllocation.attractionsFullNames
                        )"
                        :key="index"
                      >
                        {{ item }}
                      </el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <div class="info-item">
                    <div class="label">商圈</div>
                    <div class="value">
                      <el-tag
                        effect="plain"
                        style="margin-right: 10px"
                        v-for="(item, index) in strToArr(
                          housingAllocation.businessCircleNames
                        )"
                        :key="index"
                      >
                        {{ item }}
                      </el-tag>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <ruleDetail v-model="dialogRuleDetailVisible" :unsubscribeRuleId="unsubscribeRuleData.unsubscribeRuleId" />
  </div>
</template>

<script>
import {
  listDecoration,
  listFacilities,
  listPayType,
  getHousingAllocation,
  listAttractions,
  listCircle,
  addHousingAllocation,
  updateHousingAllocation,
  getAllInfoLabel,
  listRange,
  addLabel,
} from "@/api/house/unmount";
import { getContractTemplate } from "@/api/contract/template"
import { getUnsubscribeRule } from "@/api/house/rule";
import ruleDetail from "../../rule/components/detail.vue";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    houseId: {
      default: undefined,
    },
    title: {
      default: "详情",
    },
    success: {
      type: Function,
      default: () => {},
    },
  },
  dicts: [
    "dict_house_nature",
    "dict_house_type",
    "dict_online_rental_type",
    "dict_house_state",
    "dict_room_type",
    "dict_tenant_type",
    "dict_unsubscribe_rule_type",
  ],
  components:{
    ruleDetail
  },
  data() {
    return {
      visible: false,
      current: 0,
      tabsList: [
        { label: "基本信息", value: 0 },
        { label: "租约记录", value: 1 },
        { label: "财务账单", value: 2 },
        { label: "维保服务", value: 3 },
        { label: "智能锁记录", value: 4 },
        { label: "水电记录", value: 5 },
        { label: "操作记录", value: 6 },
      ],
      //整体数据
      housingAllocation: {},
      //退订规则数据
      unsubscribeRuleData: {},
      //合同数据
      contractTemplateData: {},
      //房屋数据
      houseData: {},
      //装修状况列表
      decorationList: [],
      //押付方式列表
      payTypeList: [],
      // 商圈列表
      circleList: [],
      // 景点列表
      attractionsList: [],
      //标签列表
      labelList: [],
      //价格区间列表
      rangeList: [],

      dialogFacilitiesVisible: false,
      facilitiesList: [],
      // facilitieSelected: [],
      facilitiesForm: {
        facilitiesArr: [],
      },
      form: {},
      configList: [],
      dialogPriceFormVisible: false,
      priceForm: {},
      priceList: [],
      //时效收费list
      priceMap: [],
      showCalendar: false,
      dialogSelectRuleVisible: false,
      dialogSelectContractVisible: false,
      customLabelStatus: false,
      dialogRuleDetailVisible:false,
      customLabelContent: "",
    };
  },

  computed: {
    generateHouseName() {
      return (row) => {
        let name = "";
        if (row.provinceName) name += row.provinceName;
        if (row.cityName) name += row.cityName;
        if (row.districtName) name += row.districtName;
        if (row.streetName) name += row.streetName;

        if (row.estateName) name += row.estateName;
        if (row.buildingName) name += row.buildingName + "栋";
        if (row.unitName) name += row.unitName + "单元";
        if (row.roomNumber) name += row.roomNumber + "号";
        return name;
      };
    },
    generateAddress() {
      return (row) => {
        let name = "";
        if (row.provinceName) name += row.provinceName;
        if (row.cityName) name += row.cityName;
        if (row.districtName) name += row.districtName;
        if (row.streetName) name += row.streetName;
        return name;
      };
    },
    //字符串转数组
    strToArr() {
      return (str) => {
        if (!str) return;
        return str.split(",");
      };
    },
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init();
      }
      this.visible = newVal; // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit("input", val); // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  methods: {
    //初始化
    init() {
      // this.getListDecoration();
      this.getListCircle();
      this.getListPayType();
      this.getListAttractions();
      this.getAllInfoLabel();
      this.getListRange();
      this.reset();
      //获取详情信息
      this.getHousingAllocation();
    },
    //新增周边配置
    addConfig() {
      let data = {
        type: "",
        content: "",
      };
      this.configList.push(data);
    },
    //选择退订规则回调
    selectRuleCb(data) {
      this.form.unsubscribeRuleId = data.unsubscribeRuleId;
      this.unsubscribeRuleData = data;
    },
    //获取退订规则详情
    getRule() {
      if (!this.form.unsubscribeRuleId) return;
      let id = this.form.unsubscribeRuleId;
      getUnsubscribeRule(id).then((response) => {
        this.unsubscribeRuleData = response.data;
      });
    },
    //选择合同回调
    selectContractCb(data) {
      this.form.templateId = data.templateId;
      this.contractTemplateData = data;
    },
    //获取合同详情
    getContractTemplate() {
      if (!this.form.templateId) return;
      let id = this.form.templateId;
      getContractTemplate(id).then((response) => {
        this.contractTemplateData = response.data;
      });
    },
    //价格日历新增数据
    addPriceCalendar() {
      let data = {
        startTime: "",
        endTime: "",
        price: null,
      };
      this.priceList.push(data);
    },
    //获取装修状况
    // getListDecoration() {
    //   listDecoration()
    //     .then((res) => {
    //       if (res.code == 200) {
    //         this.decorationList = res.data;
    //       }
    //     })
    //     .catch((err) => {});
    // },
    //获取押付方式列表
    getListPayType() {
      listPayType().then((response) => {
        if (response.code == 200) {
          this.payTypeList = response.data;
        }
      });
    },
    //获取商圈
    getListCircle() {
      listCircle().then((response) => {
        if (response.code == 200) {
          this.circleList = response.data;
        }
      });
    },
    //获取景点
    getListAttractions() {
      listAttractions().then((response) => {
        if (response.code == 200) {
          this.attractionsList = response.data;
        }
      });
    },
    //获取标签
    getAllInfoLabel() {
      getAllInfoLabel().then((response) => {
        if (response.code == 200) {
          this.labelList = response.data;
        }
      });
    },
    //添加自定义标签
    addCustomLabel() {
      let value = this.customLabelContent;
      if (!value) return;
      let data = {
        labelName: value, //标签名
      };
      addLabel(data).then((response) => {
        if (response.code == 200) {
          this.customLabelContent = "";
          this.getAllInfoLabel();
          this.$nextTick(() => {
            this.form.labelIdList.push(response.data.labelId);
          }, 500);
          this.customLabelStatus = false;
        }
      });
    },
    //获取价格区间
    getListRange() {
      listRange().then((response) => {
        if (response.code == 200) {
          this.rangeList = response.data;
        }
      });
    },
    //展示房屋配置弹窗
    showDialogFacilities() {
      listFacilities().then((res) => {
        if (res.code == 200) {
          this.facilitiesList = res.data;
          this.facilitiesForm.facilitiesArr = [];
          this.dialogFacilitiesVisible = true;
        }
      });
    },
    closeFacilitiesDialog(done) {
      this.$refs.facilitiesForm.resetFields();
      this.facilitiesForm.facilitiesArr = [];
      done();
    },
    // 选择设施
    selectFacilities() {
      let list = this.facilitiesList.filter((item) =>
        this.facilitiesForm.facilitiesArr.includes(item.facilitiesId)
      );
      this.form.facilitiesItems = list.map((item) => {
        return {
          facilitiesId: item.facilitiesId,
          facilitiesName: item.facilitiesName,
          facilitiesPrice: item.facilitiesPrice,
          facilitiesNumber: undefined,
        };
      });
      this.form.facilitiesItems = this.form.facilitiesItems;
      this.dialogFacilitiesVisible = false;
    },
    //移除设施项
    removeFacitieItem(index) {
      this.form.facilitiesItems.splice(index, 1);
    },
    //添加收费标准字段
    addPriceMap() {
      this.priceMap.push({
        timeRangeId: null,
        fixedPrice: null,
      });
    },
    removePriceMap(index) {
      this.priceMap.splice(index, 1);
    },
    //重置表单
    reset() {
      this.unsubscribeRuleData = {};
      this.contractTemplateData = {};
      this.houseData = {};
      this.priceMap = [];
      this.customLabelContent = "";
      this.customLabelStatus = false;
      this.form = {
        allocationId: undefined, //房屋配置id
        houseId: "", //房屋id
        apartmentPicture: "", //房屋照片路径
        apartmentType: "", //公寓类型 1短租公寓 2长租公寓
        rentStartingTime: undefined, //最小起租时间
        noRentableStartTime: "", //不可租开始时间
        noRentableEndTime: "", //不可租结束时间
        checkoutTime: "", //短租可入住时间
        leaseEndTime: "", //短租退租截止时间
        chargeType: "", //收费类型：0固定收费 1时效收费
        fixedPrice: undefined, //固定收费价格
        cashPledge: undefined, //押金
        servicePrice: undefined, //服务费
        unsubscribeRuleId: undefined, //退订规则id
        templateId: undefined, //合同id
        stewardPhone: "", //管家电话
        decorationId: undefined, //装修情况id
        facilitiesItems: [], //房屋配置明细
        labelIdList: [], //公寓标签ids
        apartmentDescription: "", //房屋描述
        attractionsIdList: [], //景区id集合
        businessCircleIdList: [], //商区id集合
        agingPriceMap: {}, //时效收费价格接参
        averageDaily: undefined, //日均价
        monthPrice: undefined, //月租价
        payTypeId: undefined, //押付方式id
        rentableStartTime: "", //可租开始时间
        rentableEndTime: "", //可租结束时间
      };
      this.resetForm("form");
    },
    //获取详情信息
    getHousingAllocation() {
      if (!this.houseId) return;
      getHousingAllocation(this.houseId)
        .then((response) => {
          for (const key in this.form) {
            if (Object.hasOwnProperty.call(this.form, key)) {
              this.form[key] = response.data[key];
              //房屋id
              if (key == "houseId") {
                this.form[key] = response.data.house.houseId;
              }
            }
          }
          //整体数据渲染
          this.housingAllocation = response.data;
          //房屋数据渲染
          this.houseData = response.data.house;
          //价格区间渲染
          this.form.agingPriceMap &&
            Object.keys(this.form.agingPriceMap).forEach((item) => {
              console.log("item", item, this.form.agingPriceMap[item]);
              this.priceMap.push({
                timeRangeId: Number(item),
                fixedPrice: this.form.agingPriceMap[item],
              });
            });
          //标签渲染
          let labelIdsArr = response.data.labelIds
            .split(",")
            .map((item) => Number(item));
          this.form.labelIdList = labelIdsArr;
          this.getRule();
          this.getContractTemplate();
        })
        .catch((err) => {});
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let agingPriceMap = {};
          if (this.priceMap.length) {
            this.priceMap.map((item) => {
              agingPriceMap[item.timeRangeId] = item.fixedPrice;
            });
            this.form.agingPriceMap = agingPriceMap;
          }
          // console.log('agingPriceMap',agingPriceMap);return
          if (this.form.allocationId != undefined) {
            updateHousingAllocation(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("success");
            });
          } else {
            addHousingAllocation(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("success");
            });
          }
          this.close();
        }
      });
    },
    //关闭
    close() {
      this.reset();
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.import-dialog {
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  .header {
    .title {
      background: #ceeefc;
      padding: 10px 30px;
      margin-bottom: 30px;
      font-weight: 700;
      font-size: 20px;
    }
    .info {
      position: relative;
      margin-bottom: 20px;
      &.borderRight {
        border-right: 1px solid #d7d7d7;
      }

      .item {
        display: flex;
        align-items: center;
        .logo {
          background: #f2f2f2;
          height: 60px;
          width: 60px;
          border-radius: 50%;
          color: #1296db;
          text-align: center;
          font-size: 50px;
          text-align: center;
        }
        .content-box {
          .label {
            color: #aaaaaa;
            font-size: 14px;
          }
          .desc {
            font-size: 16px;
            font-weight: 700;
            .icon {
              color: #1296db;
              cursor: pointer;
              font-size: 20px;
            }
          }
        }
      }
    }
    .h-buttom {
      background: #ceeefc;
      color: #1296db;
      padding: 5px 30px;
      margin-bottom: 20px;
    }
  }
  .main {
    .tabs-box {
      .tabs-header {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          background-color: #e4e7ed;
        }
        .tabs-list {
          display: flex;
          .label {
            color: #555555;
            font-size: 18px;
            cursor: pointer;
            margin-right: 20px;
            padding: 5px;
            &.active {
              color: #1296db;
              border-bottom: 3px solid #1296db;
              cursor: default;
              font-weight: 700;
            }
          }
        }
        .handle-box {
          display: flex;
          .item {
            margin-right: 5px;
            color: #1296db;
            cursor: pointer;
            font-size: 14px;
          }
        }
      }
      .tabs-body {
        .info-box {
          .info-title {
            margin: 20px 0;
            font-size: 20px;
          }
          .info-item {
            margin-bottom: 20px;
            .label {
              color: #7f7f7f;
              margin-bottom: 10px;
            }
            .value {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
//弹出层里内容的高度
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}
</style>